<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    随即
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div id="akk"></div>
    <div :id="containerId" style="width: 100%; height: 500px"></div>
    <button @click="tangchuang">点击</button>
  </div>
</template>

<script>
import { createMapAdapter } from '../adapter/MapAdapter';

// import HelloWorld from './components/HelloWorld.vue'
let seed = 1;
export default {
  name: 'App',
  props: {
    // region: { type: String, required: true },   // 外部传入地区 code
    lng: { type: Number, default: 113.93687 },
    lat: { type: Number, default: 22.52828 },
    zoom: { type: Number, default: 15 }
  },
  components: {
    // HelloWorld
  },
  data() {
    return {
      containerId: `region_map_${seed++}`,
      adapter: null // 保存适配器实例
    };
  },
  async mounted() {
    // console.log(111111, this.$sdk.call('pay'));
    console.log(122, this.$sdk);
    // console.log(126,  window.lightAppJssdk.user.loginapp);

    this.$sdk.auth.getTicket();
    //  const method =this.$sdk.jsBridge.api.get("notification.alert")
    //  method()
    // method({ message: 'Hello from App.vue' })
    // await window.lightAppJssdk.notification.alert({
    //   message: '这是一个弹窗',
    //   title: '提示', //可传空
    //   buttonName: '收到',
    //   success: function (data) {
    //     console.log("🚀 ~ App.vue:45 ~ mounted ~ data:", data)
    //     //onSuccess 将在点击button之后回调
    //     /*回调*/
    //   },
    //   fail: function (data) {
    //     console.log("🚀 ~ App.vue:50 ~ mounted ~ data:", data)
    //     //错误返回
    //   }
    // });
    // console.log("🚀 ~ App.vue:38 ~ mounted ~ method:", method)
    // this.$sdk.auth.ssoLogin("ssoTicket")
    console.log(142, process.env.VUE_APP_DEFAULT_REGION);
    // this.adapter = await createMapAdapter("haiTang", this.containerId,this.$sdk.config);
    this.adapter = await createMapAdapter(
      process.env.VUE_APP_DEFAULT_REGION,
      this.containerId,
      this.$sdk.config
    );
    console.log('🚀 ~ App.vue:28 ~ mounted ~ this.adapter:', this.adapter);
    // 地图已 centerAndZoom，可直接加标记
    this.adapter.addMarker(this.lng, this.lat, '默认中心');
  },
  methods: {
    tangchuang(){
      // console.log(111,window.lightAppJssdk.notification.alert());
       window.lightAppJssdk.notification.alert({
      message: '这是一个弹窗',
      title: '提示', //可传空
       buttonLabels: ['确定', '取消'],
      // buttonName: '收到',
      success: function (data) {
        console.log("🚀 ~ App.vue:45 ~ mounted ~ data:", data)
        //onSuccess 将在点击button之后回调
        /*回调*/
      },
      fail: function (data) {
        console.log("🚀 ~ App.vue:50 ~ mounted ~ data:", data)
        //错误返回
      }
    });

    },
    addMarker(lng, lat, title) {
      this.adapter.addMarker(lng, lat, title);
    },
    panTo(lng, lat) {
      this.adapter.panTo(lng, lat);
    },
    getZoom() {
      return this.adapter.getZoom();
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: var(--background-color);
  margin-top: 60px;
}
#akk {
  width: 200px;
  height: 200px;
  background-image: var(--background-image-url); /* 使用占位图作为示例 */
  background-size: cover;
  background-position: center;
}
</style>
